
<!-- 动态表单组件选择器 -->
<!-- 多选框，取色器，日期选择器，日期时间选择器，输入框，数字输入框 -->
<!-- 单选框，评分，选择器，虚拟化选择器，滑块，开关 -->
<template>
    <!-- 多选框 -->
    <!-- <div v-if="itemType == 'Checkbox'">
        <el-checkbox v-for="(item, index) in prop.data" :key="index" v-model="item.checked"
            :label="item.label"></el-checkbox>
    </div> -->
    <!-- 输入框 -->
    <div v-if="itemType == 'Input'">
        <el-input v-model="childValue" placeholder="Please input"></el-input>
    </div>
    <!-- 单选框 -->
    <div v-if="itemType == 'Radio'">
        <el-radio-group v-model="childValue" class="ml-4">
            <el-radio v-for="(item, index) in selectItems" :label="item.label" size="large" :key="index">{{ item.value }}
            </el-radio>
        </el-radio-group>
    </div>
    <!-- 开关 -->
    <div v-if="itemType == 'Switch'">
        <el-switch v-model="childValue" size="large" inline-prompt
            style="--el-switch-on-color: #409eff; --el-switch-off-color: #ff4949" :active-text="selectItems[0].value"
            :inactive-text="selectItems[1].value" :active-value="selectItems[0].label"
            :inactive-value="selectItems[1].label" />
    </div>
    <!-- 选择器 -->
    <div v-if="itemType == 'Select'">
        <el-select v-model="childValue" class="m-2" placeholder="Select" size="large" style="width: 240px">
            <el-option v-for="item in selectItems" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref, watchEffect, watch } from "vue";
import { useTableStore } from "@/store/modules/table";
const TableStore = useTableStore();

const prop = defineProps<{
    itemType: string;
    modelValue: any;
    defaultValue: any;
    selectItems: any[]
}>();

const emit = defineEmits([
    'update:modelValue'
])

const childValue = ref(prop.modelValue);

// 监听子组件的值变化，通过 emit 发送到父组件
watchEffect(() => {
    emit('update:modelValue', childValue.value);

});

// 监听仓库的表单更新标志变化，对表单进行重置
watch(
    () => TableStore.tableReset,
    () => {
        childValue.value = prop.defaultValue;//重置为表单默认值
    }
);

</script>

<style scoped></style>
